<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>7.26的练习代码</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<style type="text/css">
		span {
			background: red;
			display: inline-block;
			padding: 10px;
			color: #fff;
			margin: 10px;
		}

		div {
			margin: 50px;
			border: 1px solid #87CEEB;
			padding: 20px;
		}

		.ori_style span {
			/* 该样式起作用的时候，会将span元素的背景颜色改为天蓝色 */
			background: skyblue;
		}

		.ori_font {
			/* 字体部分原始样式：大小为10px，字体颜色是白色 */
			font-size: 10px;
			color: red;
		}

		.cha_font {
			/* 改变之后的样式：字体大小为20px，加粗，颜色为天蓝色 */
			font-size: 20px;
			font-weight: 700;
			color: skyblue;
		}

		.computed_color {
			color: greenyellow;
			font-size: 20px;
			font-weight: 700;
		}
	</style>
	<body>
		<div id="vue_app">
			<h1>动态绑定CSS样式</h1>
			<!-- <p :class="{style1:true,style2:true}">这是一个P标签</p> -->
			<!-- 在这里绑定的class动态属性使用v-bind:class也可简写为:class= -->
			<!-- class中的style1、2结果为true的时候才会被赋值，否则不显示 -->
			<!-- 但是这并不是动态的，我们需要根据数据的变化来更改属性 -->

			<h3>示例1</h3>
			<!-- div的绑定的动态属性ori_style受ispen控制，isopen在js的data中定义
			 当isopen为true时，ori_style样式生效，反之则失效-->
			<div :class="{ori_style : isopen}">
				<span>
					测试测试测试
				</span>
			</div>
			<!-- 如果上面测试中的span背景色为天蓝色的时候，那么下面的文字也显示天蓝色，否则不可见-白色 -->
			<div class="ori_font" :class="[isopen ? 'cha_font':'ori_font']">
				测试文字
				whkgogo
			</div>
			<button type="button" @click="change_font">改变文字样式</button>

			<div class="computed_div">
				<button type="button" @click="isopen = !isopen">change
					color</button>
				<span :class="[isopen?'computed_color':'']">whkgogo/测试文字</span>
			</div>

			<!-- v-if的练习 -->
			<div id="v_if">
				<h1>v-if的使用</h1>
				<!-- 点击按钮的时候会改变error_code和success_code的值 -->
				<button type="button" @click="error_msg">error</button>
				<button type="button" @click="success_msg">success</button>
				<!-- 当error_code为真的时候，显示错误信息，当success_code为真的时候显示成功信息 -->
				<p v-if="error_code">发生了致命错误！</p>
				<!-- 加上else以后两者只能显示一个 -->
				<p v-else-if="success_code">顺利通过！</p>
				<br />
				<!-- 还有另一种隐藏方式：v-show,这种方法只是将元素的display设置为none，实际元素是一直存在的，只是不显示而已 -->
				<p v-show="error_code">发生了致命错误！</p>
				<!-- 加上else以后两者只能显示一个 -->
				<p v-show="success_code">顺利通过！</p>
			</div>
			
			
			<!-- v-for循环 -->
			<div id="v_for" >
				<ul v-for="item in users">
					<li>姓名：{{item.name}}</li>
					<li>年龄：{{item.age}}</li>
					<li>地址：{{item.address}}</li>
				</ul>
				
				<!-- 避免有的情况下循环出很多div，可以使用template -->
				<!-- 循环的时候要加上key的值，这样就不会出错，将item部分写为：(item,index/i)，其中的i就可以当key，因为是唯一的
				或者添加数据的时候，在数据中添加一个id，最好采用这个方法-->
				<template v-for="(item,index) in users">
					<!-- 这里会报错原因：vue不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。
						解决方法：可以改成div或者 不使用template元素做for循环 -->
						<!-- template不能绑定key值 -->
					<h1>{{item.id}}-{{item.name}}</h1>
					<p>{{item.age}}</p>
					<p>{{item.address}}</p>
				</template>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="app726.js">

	</script>
</html>
